<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background: #f5f6fa;
            box-sizing: border-box;
        }
        .top{
            height: 100px;
            width: 800px;
            margin-top: 10px;
            margin-left: 110px;
            /*border: 1px solid red;*/
            text-align: center;
        }
        div.loge{
            height: 50px;
            width: 800px;
            margin: -10px auto;
            /*border: 1px solid red;*/
            text-align: right;
        }
        .loge_top{
            margin-right: 101px;
        }
        div.loge b{
            display: inline-block;
            background: url("./image_jd/dd.png") no-repeat;/*背景图片注意是谁的背景图*/
            height: 20px;
            width: 50px;
            position: relative;
            top: 7px;
            left: 30px;
        }
        div.loge a{
            text-decoration: none;
            color: #999999;
        }
        div.loge a:hover{
            color: #e4393c;
            text-decoration: underline;
        }
        div.main{
            width: 800px;
            margin: 60px auto;
            height: 400px;
            /*border: 1px solid red;*/
            display: flex;
            justify-content: space-between;
            /*justify-content: space-between;*/
            /*float: left;*/
        }
        div.main .main_left{
            margin-top: 20px;
            height: 380px;
            width: 380px;
            /*border: 1px solid blue;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div.main .main_right{
            margin-top: 20px;
            height: 380px;
            width: 380px;
            /*border: 1px solid blue;*/
            display: flex;
        }
        .font{
            text-align: center;
            /*border: 1px solid blue;*/
            width: 250px;
            margin-bottom: 30px;
        }
       .font h1{
           font-size: 20px;
           display: inline-block;
        }
       .font h1 span{
            color: red;
           margin-right: 20px;
        }
       form label{
           display: block;
           /*width: 300px;*/
       }
       ._input{
           width: 250px;
       }
        ._input input{
            width: 100%;
            height:  50px;
            border: none;
            background-color: #f7f8fc;
            outline: none;
        }
        .fgPsw{
            /*border: 1px solid red;*/
            width: 250px;
            text-align: right;
            font-size: 12px;
        }
        .fgPsw a{
            text-decoration: none;
            color: #666666;
        }
        .fgPsw a:hover{
            text-decoration: underline;
            color: red;
        }
        button{
            width: 250px;
            height: 40px;
            background-color: #fd9d94;
            border-radius: 10px;
            border: none;
            color: #ffffff;
            font-weight: bold;
        }
        button:hover{
            cursor: not-allowed;
        }
        .qq{
            width: 250px;
            height: 30px;
            font-size: 12px;
        }
        .qq .qq_r{
            position: relative;
            top: 4px;
            float: right;
            text-decoration: none;
            color: #666666;
        }
        .qq .qq_l1{
            text-decoration: none;
            color: #666666;
            margin-right: 20px;
        }
        .qq .qq_Loge{
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url("./image_jd/QQ-weixin.png") no-repeat -1px 0;
            background-size: cover;
            position: relative;
            top: 3px;
            left: -1px;
        }
        .qq .wx_Loge{
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url("./image_jd/QQ-weixin.png") no-repeat -16px 0;
            position: relative;
            background-size: cover;
            top: 3px;
            left: -1px;
        }
        .qq .qq_l2{
            text-decoration: none;
            color: #666666;
        }
        .qq .qq_l1:hover{
            text-decoration: underline;
            color: red;
        }
        .qq .qq_l2:hover{
            text-decoration: underline;
            color: red;
        }
        .qq .qq_r:hover{
            text-decoration: underline;
            color: #59639a;
        }
        .main_right{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sj{
            font-size: 17px;
            text-align: center;
            margin-bottom: 14px;
        }
        .right_loge{
            text-align: center;
            margin-bottom: 14px;
        }
        .dk{
            margin-top: 17px;
            font-size:  12px;
            color: #666666;
        }
        .tip{
            color: #e4393c;
            text-decoration: none;
            margin-right: 17px;
        }
        div.main ._center{
            margin-top: 85px;
            height: 250px;
            border: 1px solid #bfbfbf;
        }
        .bottom{
            text-align: center;
            position: relative;
            top: -50px;
            left: -30px;
        }
        .bottom .bottom_ul{
            list-style: none;
            display: inline-flex;
            justify-content: space-between;
        }
        .bottom .bottom_ul ._line{
            font-size: 12px;
            position: relative;
            top: 4px;
            margin-left: 6px;
            margin-right: 6px;
        }
        .bottom .bottom_ul li a{
            display: inline-block;
            font-size: 12px;
            text-decoration: none;
            color: #666666;
        }
        .bottom .bottom_ul li a:hover{
            text-decoration: underline;
            color: #e4393c;
        }
        .last{
            font-size: 12px;
            text-align: center;
            color: #666666;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="./image_jd/logo-201305-b.png" >
    </div>
    <div class="loge">
        <b></b><a href="#" class="loge_top">登录页面，改进建议</a>
    </div>
    <div class="main">
        <div class="main_left">
            <div class="-box">
                <div class="font">
                    <div>
                        <h1><span>密码登录</span></h1>
                        <h1>短信登录</h1>
                    </div>
                </div>
                    <div class="_input">
                        <form>
                        <label><input type="text" name="username" placeholder="账号名/手机号/邮箱"></label>
                        <label><input type="password" name="password" placeholder="密码"></label>
                        </form>
                    </div>
                    <div class="fgPsw"><a href="#">忘记密码</a></div>
                    <div>
                        <button>登录</button>
                    </div>
                <div class="qq">
                    <span class="qq_Loge"></span><a href="#" class="qq_l1">QQ</a>
                    <span class="wx_Loge"></span><a href="#" class="qq_l2">微信</a>
                    <a href="#" class="qq_r">立即注册</a>
                </div>
            </div>
        </div>
        <div class="_center"></div>
        <div class="main_right">
            <div class="r_box">
                <h1 class="sj">手机扫码安全登录</h1>
                <div class="right_loge"><img src="./image_jd/show.png" alt=""></div>
                <div class="dk">打开<a href="#" class="tip">手机京东</a>扫描二维码</div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <ul class="bottom_ul">
            <li><a href="#">关于我们</a></li>
            <li class="_line">|</li>
            <li><a href="#">联系我们</a></li>
            <li class="_line">|</li>
            <li><a href="#">人才招聘</a></li>
            <li class="_line">|</li>
            <li><a href="#">商家入驻</a></li>
            <li class="_line">|</li>
            <li><a href="#">广告服务</a></li>
            <li class="_line">|</li>
            <li><a href="#">手机京东</a></li>
            <li class="_line">|</li>
            <li><a href="#">友情链接</a></li>
            <li class="_line">|</li>
            <li><a href="#">销售联盟</a></li>
            <li class="_line">|</li>
            <li><a href="#">京东社区</a></li>
            <li class="_line">|</li>
            <li><a href="#">京东公益</a></li>
        </ul>
    </div>
    <div class="last">Copyright © 2004-2025  京东JD.com 版权所有</div>
</body>
</html>



